
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                              <form id="" class="form-horizontal">
                                  <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Print Disconnection Notice</i></h5>
                                  </div>
                                     <div class="ibox-content">
                                          
                                          <div><label class="col-lg-2 control-label">Area</label>
                                              <div class="col-lg-3">
                                                <select name="areas" class="chosen-select" id="area">
                                                    <option value=""></option>
                                                    <?php foreach ($zones as $key): ?>
                                                        <option value="<?php echo $key->lookup_code; ?>"><?php echo $key->meaning; ?></option>
                                                    <?php endforeach;?>
                                                </select>
                                              </div>
                                          </div>
                                           <div class="form-group">
                                              <label class="col-lg-4 control-label"></label>
                                              <div class="col-lg-5">
                                                <a href="" class="btn btn-w-m btn-info btn-md pull-right m-t-n-xs print-btn" id="print_bars"> Print</a>
                                                 <!--  <button id="barPrint" class="btn btn-primary btn-md pull-right m-t-n-xs barcode-btn btn-margin-right" > Generate</button> -->
                                              </div>
                                          </div>
                                      </div>
                                  </form>
                          
                                <div class="" id="bar_result" >
                                  <div class="ibox-content custom">
                                          <table class="table-bordered table-compact" style="width:30%;align:center;" align="center">
                                              
                                              <tbody  id ="bars" >
                                                  <tr>
                                                    <!-- <td id="" style="padding-top:0px;"><span></span></td> -->
                                                    <!-- <td id="bars-act"></td> -->
                                                  </tr>
                                              </tbody>


                                          </table>
                                  </div>
                                </div>
                              <table style="width:100%;align:center; display: none;" class="table-bordered table-compact" id="reports">
                                <thead>
                                  <tr><th></th></tr>
                                </thead>
                                <tbody id="tbod">
                                  <tr >
                                      <td style="border:2px solid black;">
                                          <h5 style="text-align:center;margin-bottom:0px;">BARANGAY LUMBIA WATER SYSTEM</h5>
                                          <h6 style="text-align:center;margin-top:0px;">Barangay Lumbia, Cagayan de Oro City</h6>
                                        
                                        <h5 style="text-align:center;">D I S C O N N E C T I O N &nbsp; &nbsp; N O T I C E</h5>
                                        <h6 style="float:right;margin-right:50px;margin-top:0px;">Date:______________</h6>
                                        <h6 style="margin-left:50px;">Dear ________,</h6>
                                        <h6 style="margin-left:50px;margin-bottom:10px;">Greetings!</h6>
                                          <h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:3px;">Your account is already in ARREARS and DUE FOR DISCONNECTION after the lapse of (5)days upon receiving the second bill.</h6>
                                          <h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:10px;">To Avoid ADDITIONAL CHARGES and WATER DISCONNECTION please pay your bills at our office</h6>
                                      
                                          <h6 style="margin-left:50px;margin-top:0px;">NOTE : <i>Please Disregard this notice if payment has already been made. THANK YOU.</i></h6>
                                          <h6 style="margin-left:50px;margin-top:0px;">Received by:</h6>
                                          <h6 style="margin-left:50px;margin-top:0px;">Customer's Signature</h6>
                                    </td>
                                  </tr>
                                  <tr >
                                      <td style="border:2px solid black;">
                                          <h5 style="text-align:center;margin-bottom:0px;">BARANGAY LUMBIA WATER SYSTEM</h5>
                                          <h6 style="text-align:center;margin-top:0px;">Barangay Lumbia, Cagayan de Oro City</h6>
                                        
                                        <h5 style="text-align:center;">D I S C O N N E C T I O N &nbsp; &nbsp; N O T I C E</h5>
                                        <h6 style="float:right;margin-right:50px;margin-top:0px;">Date:______________</h6>
                                        <h6 style="margin-left:50px;">Dear ________,</h6>
                                        <h6 style="margin-left:50px;margin-bottom:10px;">Greetings!</h6>
                                          <h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:3px;">Your account is already in ARREARS and DUE FOR DISCONNECTION after the lapse of (5)days upon receiving the second bill.</h6>
                                          <h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:10px;">To Avoid ADDITIONAL CHARGES and WATER DISCONNECTION please pay your bills at our office</h6>
                                      
                                          <h6 style="margin-left:50px;margin-top:0px;">NOTE : <i>Please Disregard this notice if payment has already been made. THANK YOU.</i></h6>
                                          <h6 style="margin-left:50px;margin-top:0px;">Received by:</h6>
                                          <h6 style="margin-left:50px;margin-top:0px;">Customer's Signature</h6>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
 <script type="text/javascript">
  $(document).ready(function(){
    $(".chosen-select").chosen({width:"100%;"});
    $('#reports').hide();
    
    
    $('#print_bars').click(function(){
      
      $('#reports').show();
      //$('#reports').print();
      // var divToPrint=document.getElementById("reports");
      //  newWin= window.open("");
      //  newWin.document.write(divToPrint.outerHTML);
      //  newWin.print();
      //  $('#reports').hide();
      //  newWin.close();

      

       var contents = document.getElementById("reports").outerHTML;
            var frame1 = document.createElement('iframe');
            frame1.name = "frame1";
            frame1.style.position = "absolute";
            frame1.style.top = "-1000000px";
            document.body.appendChild(frame1);
            var frameDoc = (frame1.contentWindow) ? frame1.contentWindow : (frame1.contentDocument.document) ? frame1.contentDocument.document : frame1.contentDocument;
            frameDoc.document.open();
            frameDoc.document.write('<html><head><title>DIV Contents</title>');
            frameDoc.document.write('</head><body>');
            frameDoc.document.write(contents);
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            $('#reports').hide();
            window.frames["frame1"].focus();
            window.frames["frame1"].print();

            setTimeout(
              function(){
                  
                  document.body.removeChild(frame1);
              },
                500
              );
            // setTimeout(function () {
            //     window.frames["frame1"].focus();
            //     window.frames["frame1"].print();
            //     frame1.remove();
            // }, (60 * 1000));
            return false;
             

      });



    // $('#barcode_gen').validate({
    //     rules:{
    //       gen_serial    : {
    //         required : true
    //       }
    //     },submitHandler: function(form){
    //                 $.ajax({
    //                     type: "POST",
    //                     url: "<?php echo base_url($this->session->userdata('forajax').'/gen_barcodes'); ?>",
    //                     data: $('#barcode_gen').serialize(),
    //                     dataType: 'json',
    //                 success: function(data){
    //                     console.log(data);
    //                     $('#bars').append('<tr><td style="padding-top:0px;"><img src="<?php echo base_url("assets/barcodes/temp"); ?>'+ '/' + data + '.png' + '" width="120" height="28" style="align:left; padding-top:3px" ></td></tr>');
    //                   }
    //                 });
    //              }
    //   });

    $('#area').change(function(){
        $.ajax({
            type: "POST",
            url: "<?php echo base_url($this->session->userdata('forajax').'/gen_disc'); ?>",
            data: {"zone": $('#area').val()},
            dataType: 'json',
        success: function(data){
          var trHTML = '';
          $('#tbod').html('');
                  $.each(data, function(i, item) {
                      trHTML += '<tr><td style="border:2px solid black;"><h5 style="text-align:center;margin-bottom:0px;">BARANGAY LUMBIA WATER SYSTEM</h5><h6 style="text-align:center;margin-top:0px;">Barangay Lumbia, Cagayan de Oro City</h6><h5 style="text-align:center;">D I S C O N N E C T I O N &nbsp; &nbsp; N O T I C E</h5><h6 style="float:right;margin-right:50px;margin-top:0px;">Date:______________</h6><h6 style="margin-left:50px;">Dear '+data[i].name+'</h6><h6 style="margin-left:50px;margin-bottom:10px;">Greetings!</h6><h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:3px;">Your account already have ('+data[i].a_count+')ARREARS and DUE FOR DISCONNECTION after the lapse of (5)days upon receiving the second bill.</h6><h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:10px;">To Avoid ADDITIONAL CHARGES and WATER DISCONNECTION please pay your bills at our office</h6><h6 style="margin-left:50px;margin-top:0px;">NOTE : <i>Please Disregard this notice if payment has already been made. THANK YOU.</i></h6><h6 style="margin-left:50px;margin-top:0px;">Received by:</h6><h6 style="margin-left:50px;margin-top:0px;">Customers Signature</h6></td></tr>';
                      });
                  $('#tbod').html(trHTML);
                  
        },
        complete: function(data) {
            $('#area').removeAttr('disabled');
            $('#barPrint').removeAttr('disabled');
        },
        beforeSend: function(){
            $('#barPrint').attr('disabled',true);
            $('#area').attr('disabled',true);
        }      
        });
      });
  });
 </script>